<template>
  <div>
    <header>
      <div class="search">
        <i class="icon-sousuo iconfont" @click="toSearch()"></i>
        <input type="search" placeholder="按内容搜索" class="inp2" />
      </div>
    </header>
    <main>
      <ul class="content1">
        <li v-for="item in arr" :key="item.id">{{item.catename}}</li>
      </ul>
      <div class="content2">
        <div class="warp" v-for="item in arr" :key="item.id">
          <h2>{{item.catename}}</h2>
          <div class="box1">
            <h4 v-if="!item.children">暂无数据</h4>
            <div @click="toFoodList(i.id)" v-for="i in item.children" :key="i.id" id="bb">
              <img :src="$pre+i.img" alt />
              <p>{{i.catename}}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import {reqCate} from "../../../http/api"
export default {
  data(){
    return{
      arr:[]
    }
  },
  methods:{
    toSearch(){
      this.$router.push("/search")
    },
    toFoodList(id){
      this.$router.push("/foodList?id="+id+"&type=2")
    }
  },
  mounted(){
    reqCate().then(res=>{
      this.arr=res.data.list
    })
  }
};
</script>

<style scoped>
header {
  background-color: #ff6040;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
header .search {
  margin: 0 auto;
  width: 7.06rem;
  height: 0.6rem;
  border: 2px solid gainsboro;
  border-radius: 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}
header .search .inp2 {
  width: 6.3rem;
  height: 0.6rem;
  font-size: 0.26rem;
}
main {
  overflow: hidden;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
}
main ul {
  width: 2.36rem;
  background-color: white;
  text-align: center;
  color: gray;
}
main ul li {
  height: 0.8rem;
  font-size: 0.26rem;
  line-height: 0.8rem;
}
main ul li:hover {
  font-size: 0.32rem;
  color: #ff6040;
}
main .content2 {
  padding: 0.15rem;
}
main .content2 .warp {
  width: 4.44rem;
  background-color: white;
  margin-top: 0.15rem;
  padding: 0.2rem;
}
main .content2 .warp h2 {
  font-size: 0.32rem;
  font-weight: bolder;
  line-height: 0.5rem;
  margin-left: 0.1rem;
}
main .content2 .warp img {
  width: 1.28rem;
  height: 1.28rem;
}
main .content2 .warp .box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
}
main .content2 .warp .box1 div {
  margin: 0.1rem 0.1rem;
}
main .content2 .warp .box1 img {
  margin-bottom: 0.1rem;
}
main .content2 .warp .box1 p {
  color: gray;
}
</style>